<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }
    
      #myCanvas{
          text-align: center;
        }
 
    </style>
  </head>
  <body>
    <canvas
      id="myCanvas"
      width="250"
      height="200"
      style="border: 1px solid #000000"
    >
    </canvas>
  </body>
  <script>
    //    const context = document.getElementById('myCanvas').getContext("2d")
    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");
    // 设置三角形的起点坐标
    // context.moveTo(50, 50);
    // // 设置三角形的第一个坐标点坐标
    // context.lineTo(200, 200);
    // // 设置三角形的第二点坐标位置
    // context.lineTo(300, 200);
    // // 设置自动闭合
    // context.closePath();
    // //进行绘制描边
    // context.stroke();

    // 设置三角形的起点坐标
    context.moveTo(50, 50);
    // 设置三角形的第一个坐标点坐标
    context.lineTo(180, 50);
    
    context.lineTo(180, 120);
    context.lineTo(50, 120);
    context.lineTo(50, 50);
    context.stroke();
    context.moveTo(50, 50);
    context.lineTo(110, 100);
    context.lineTo(180, 50);
    context.stroke();
    context.moveTo(50, 120);
    context.lineTo(90, 85);
    context.stroke();
    context.moveTo(180, 120);
    context.lineTo(130, 85);
    context.stroke();
  </script>
</html>
